<template>
  <div>
    <mt-cell :title="pictitle">
      <span class="h3" @click="showpicker">{{ showname }}</span>
    </mt-cell>

    <mt-popup :close-on-click-modal="false" v-model="popupVisible" position="bottom" style="width:100%" class="mint-popup">
      <mt-picker ref="picker" :slots="dataList" :visible-item-count="5" :show-toolbar="true" :default-index="3" flex="2" value-key="showname" @change="onDataChange">
        <p style="text-align:right;padding:10px" class="h2 fontcolor" @click="Determine">确定</p>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
  props: {
    pictitle: {
      type: String,
      required: true
    },
    picdata: {
      type: Array,
      required: true
    },
    values: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      handler: function (e) {
        e.preventDefault()
      },
      popupVisible: false,
      kako: true,
      age: '',
      dataList: [
        {
          values: []
        }
      ],
      showname: ''
    }
  },
  mounted () {
    if (this.picdata) {
      for (let i = 0; i < this.picdata.length; i++) {
        if (this.picdata[i].showname == this.values) {
          this.showname = this.picdata[i].showname
        }
      }
    }
    if (!this.values) {
      this.showname = '请选择'
    }
    console.log(this.$route.query.num, '0909')
  },
  methods: {
    Determine () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      this.popupVisible = false
    },
    onDataChange (picker, values) {
      // console.log(values[0], 'w')

      if (values[0] == undefined) {
        this.showname = '请选择'
      } else {
        this.showname = values[0].showname
        console.log(values[0])

        this.$emit('getpicval', values[0])
      }
    },
    showpicker () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false })
      this.dataList[0].values = this.picdata
      this.popupVisible = true
    }
  }
}
</script>

<style scoped>
.picker-slot {
  width: 100%;
}
.picker {
  height: 100%;
}
.h3 {
  display: inline-block;
  width: 220px;
  text-align: right;
}
</style>